<template>
	<view :class="selectVisible || searchVisible ? 'prevent' : ''">
		<view class="search-box">
			<u-search placeholder="搜索" bgColor="#ddd" height="25" v-model="searchVal" shape="square" :showAction="false" @change="searchChange"></u-search>
		</view>
		<u-gap height="60" bgColor="#F3F4F6"></u-gap>
		<view class="content">
			<view class="company" v-for="(item,index) in company" :key="index">
				<view class="collapse-head" hover-class="clickable" @click="changeCollapse(index)">{{item.aname}}<text style="color: #aaa;">({{item.PxCount}}/{{item.AllCount}})</text></view>
				<view class="collapse-item" id="custom-collapse" :class="current == index ? 'open':'close'" :style="{height: current == index ? (users.length)*100+'rpx':'0'}">
					<view class="collapse-item__content" hover-class="clickable" v-for="v in users" v-if="current == index" @click.stop="checkChange(v)">
						<view class="radio-box">
							<custom-radio :checked="v.checked"></custom-radio>
						</view>
						<view class="collapse-item__content--avator" v-if="v.avator">
							<image :src="v.avator" mode="" @error="onErrorImg(v)"></image>
						</view>
						<view class="collapse-item__content--avator" v-else>{{formatName(v.pname)}}</view>
						<view class="collapse-item__content--des">
							<view class="collapse-item__content--name">{{v.pname}}</view>
							<view class="collapse-item__content--dept">{{v.dept}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 搜索弹窗 -->
		<view class="" @touchmove.stop.prevent="preventHandler">
			<u-popup :show="searchVisible" :round="10" :customStyle="{top: '100rpx'}" mode="top" duration="0" @close="searchVisible = false" @open="searchVisible = true">
				<view class="" v-if="searchResult.length"  style="height: 700rpx;overflow-y: scroll;">
					<view class="select-popup-item" v-for="v in searchResult" style="display: flex;" @click="addItem(v)">
						<view class="collapse-item__content--avator" v-if="v.avator">
							<image :src="v.avator" mode="" @error="onErrorImg(v)"></image>
						</view>
						<view class="collapse-item__content--avator" v-else>{{formatName(v.pname)}}</view>
						<view class="collapse-item__content--des">
							<view class="collapse-item__content--name">{{v.pname}}</view>
							<view class="collapse-item__content--dept">{{v.dept}}</view>
						</view>
					</view>
				</view>
				<view class="no-search-result" v-else>
					找不到关于“{{searchVal}}"的结果
				</view> 
			</u-popup>
		</view> 
		
		<view class="" @touchmove.stop.prevent="preventHandler" v-if="type == 'checkbox'">
			<select-nav :list="selectName" @confirm="confirmSelect">
				<template slot="center">
					<view class="" v-for="v in selectName">
						<view class="collapse-item__content--avator" v-if="v.avator">
							<image :src="v.avator" mode="" @error="onErrorImg(v)" ></image>
						</view>
						<view class="collapse-item__content--avator" v-else>{{formatName(v.pname)}}</view>
					</view>
				</template>
				<template slot="popup">
					<view class="select-popup-item" v-for="(v,i) in selectName" style="display: flex;">
						<view class="collapse-item__content--avator" v-if="v.avator">
							<image :src="v.avator" mode="" @error="onErrorImg(v)"></image>
						</view>
						<view class="collapse-item__content--avator" v-else>{{formatName(v.pname)}}</view>
						<view class="collapse-item__content--des">
							<view class="collapse-item__content--name">{{v.pname}}</view>
							<view class="collapse-item__content--dept">{{v.dept}}</view>
						</view>
						<view class="delete-btn" @click="deleteSelectItem(v)" v-if="!v.lock">
							<u-button type="primary" text="移除" :customStyle="{height: '60rpx'}" color="#b1b9c7"></u-button>
						</view>
					</view>
				</template>
			</select-nav>
		</view>
	</view>
</template>

<script>
	import _custom from '../../../common/_custom'
	import _data from '../../../common/_data'
	import CustomRadio from '@/components/custom/radio/radio.vue'
	import SelectNav from '../../../components/custom/select-nav/select-nav.vue'
	
	export default {
		components: {
			CustomRadio,SelectNav
		},
		data() {
			return {
				searchVal: '',
				company: [],
				current: -1,
				users: [],
				selectName: [],
				selectVisible: false,
				searchResult: [],
				searchVisible: false,
				static_avator: _data.data('static_url'),
				type: 'checkbox',//单选：radio，多选：checkbox
				name: '',//用来拼接缓存时的名字
			}
		},
		onLoad(options) {
			if(options.type) this.type = options.type;
			this.name = options.name;
			this.getTeamWorkOBS()
		},
		onShow() {
			if(this.name) {
				this.selectName = _data.localData('select-list-'+this.name) ? _data.localData('select-list-'+this.name) : []
			} else {
				this.selectName = _data.localData('select-list') ? _data.localData('select-list') : []
			}
			console.log(this.selectName)
		},
		methods: {
			getTeamWorkOBS() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getTeamWorkOBS',
					success(res) {
						that.company = res
					}
				})
			},
			/**
			 * 输入事件
			 */
			searchChange() {
				let that = this;
				if(this.searchVal) {
					_custom.getDataJava({
						apiname: 'getTeamWorkOBSListByName',
						apiparam: {
							name: this.searchVal
						},
						success(res) {
							that.searchVisible = true;
							that.searchResult = res
						}
					})
				}
			},
			/**
			 * 展开列表
			 * @param {Object} i
			 */
			changeCollapse(i) {
				let that = this;
				if(i != this.current) {
					_custom.getDataJava({
						apiname: 'getTeamWorkOBSList',
						apiparam: {
							obscode: that.company[i].OBSCODE
						},
						success(res) {
							res.forEach(item => {
								item.avator = that.static_avator + "/static/photo/user/" + item.pxid + "/70.jpg"
								that.selectName.forEach(v => {
									if(item.pname == v.pname) {
										item.checked = true
										item.lock = v.lock
									}
								})
							})
							that.users = res;
						}
					})
					this.current = i
				} else {
					this.current = -1
				}
			},
			/**
			 * 格式化人名
			 * @param {Object} v
			 */
			formatName(v) {
				return v.length > 2 ? v.substring(v.length-2) : v
			},
			/**
			 * 点击人员选择
			 * @param {Object} v
			 */
			checkChange(v) {
				console.log(v)
				if(this.type == 'radio') {
					v.checked = !v.checked
					this.selectName.push(v)
					this.confirmSelect()
					return
				}
				if(v.lock) return
				v.checked = !v.checked
				if(v.checked) {
					let flag = false
					this.selectName.forEach(item => {
						if(item.pname == v.pname) {
							flag = true;
							item.lock = false
						}
					})
					if(!flag) {
						this.selectName.push(v)
					}
				} else {
					this.selectName.forEach((item,index) => {
						if(item.pname == v.pname) {
							this.selectName.splice(index,1)
						}
					})
					this.users.forEach((item => {
						if(item.pname == v.pname) {
							item.checked = false;
						}
					}))
				}
			},
			/**
			 * 图片请求失败事件
			 * @param {Object} v
			 */
			onErrorImg(v) {
				v.avator = ''
			},
			/**
			 * 点击搜索结果列表
			 * @param {Object} v
			 */
			addItem(v) {
				let flag = false;
				this.selectName.forEach(item => {
					if(item.pname == v.pname) {
						flag = true;
					}
				})
				if(!flag) {
					this.selectName.push(v)
				}
				this.searchVisible = false;
				this.searchVal = ''
			},
			/**
			 * 删除选择的人员
			 * @param {Object} v
			 */
			deleteSelectItem(v) {
				this.selectName.forEach((item,index) => {
					if(item.pname == v.pname) {
						this.selectName.splice(index,1)
					}
				})
				this.users.forEach((item => {
					if(item.pname == v.pname) {
						item.checked = false;
					}
				}))
			},
			/**
			 * 确认选择结果
			 */
			confirmSelect() {
				if(this.name) {
					_data.localData('select-list-'+this.name,this.selectName);
					uni.$emit('select-list-'+this.name,this.selectName);
				} else {
					_data.localData('select-list',this.selectName);
					uni.$emit('select-list',this.selectName);
				}
				setTimeout(() =>{
					uni.navigateBack({
						delta: 1
					})
				},300)
				
			},
			preventHandler() {
				return
			}
		}
	}
</script>

<style>
	.search-box {
		padding: 0 30rpx;
		padding-top: 20rpx;
		background-color: #fff;
		height: 100rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		/* #ifdef H5 */
		top: 90rpx;
		/* #endif */
		left: 0;
		width: 100%;
		z-index: 99999;
	}
	
	.content {
		margin-bottom: 100rpx;
	}
	
	.company {
		background-color: #fff;
		font-size: 30rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.collapse-head {
		line-height: 100rpx;
		padding-left: 30rpx;
	}
	
	.collapse-item {
		background-color: #f8f8f8;
	}
	
	.open {
		overflow: hidden;
		transition: all 1s cubic-bezier(0.25, 1.0, 0.25, 1.0);
	}
	
	.close {
		height: 0;
		transition: all 0.4s cubic-bezier(0.25, 1.0, 0.25, 1.0);
	}
	
	.collapse-item__content {
		height: 100rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #fff;
		overflow: hidden;
		box-sizing: border-box;
	}
	
	.collapse-item__content--avator {
		font-size: 27rpx;
		width: 70rpx;
		height: 70rpx;
		background-color: #3C9CFF;
		color: #fff;
		text-align: center;
		line-height: 70rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	
	.collapse-item__content--avator > image {
		width: 100%;
		height: 100%;
	}
	
	.collapse-item__content--des {
		font-size: 25rpx;
		color: #aaa;
	}
	
	.collapse-item__content--name {
		font-size: 30rpx;
		color: #000;
		line-height: 40rpx;
	}
	
	.collapse-item__content--dept {
		font-size: 25rpx;
		line-height: 25rpx;
	}
	
	.select-popup-item {
		padding: 10rpx 20rpx;
		margin-bottom: 10rpx;
	}
	
	.delete-btn {
		position: absolute;
		right: 20rpx;
		width: 80rpx;
		height: 30rpx;
	}
	
	.no-search-result {
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 30rpx;
		background-color: #fff;
	}
	
	.radio-box {
		width: 80rpx;
	}
</style>
